<style scoped>

</style>

<template>
  <div class="_role-view-table-con">
    <Card>
      <Table :columns="columns" :data="data"/>
    </Card>

    <!-- 删除 -->
    <Modal v-model="removeRoleModal.show" width="360">

      <p slot="header" style="color:#f60;text-align:center">
        <Icon type="information-circled" style="margin-right: 5px;"></Icon>
        <span>确认删除模块</span>
      </p>

      <div style="text-align:center">
        <p>此操作将会导致相关用户<b style="padding:0 5px;color: red;">操作受限</b>，请确认是否删除？</p>
      </div>

      <div slot="footer">
        <Button type="text" @click="removeRoleModal.show=false">取消</Button>
        <Button type="error" :loading="removeRoleModal.loading" @click="handleRemoveRole(removeRoleModal.role)">
          <span v-if="!removeRoleModal.loading">确认删除</span>
          <span v-else>正在删除</span>
        </Button>
      </div>
    </Modal>
  </div>
</template>

<script>
  export default {
    name: "RoleViewTable",
    props: ['data'],
    data() {
      return {
        columns: [
          {
            title: '角色编号',
            key: 'id',
            width: 100,
            align: 'center'
          },
          {
            title: '角色名称',
            key: 'name',
            align: 'center'
          },
          {
            title: '角色标识',
            key: 'identifier',
            align: 'center',
          },
          {
            title: '添加时间',
            key: 'createdDate',
            align: 'center'
          },
          {
            title: '操作',
            width: 200,
            align: 'center',
            render: (h, params) => {
              return h('div', [
                // h('Button', {
                //   props: {
                //     type: 'text',
                //     size: 'small'
                //   },
                //   on: {
                //     click: () => {
                //       this.handleUpdateRole(params.row)
                //     }
                //   }
                // }, '编辑'),
                h('Button', {
                  props: {
                    type: 'text',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.removeRole(params.row)
                    }
                  }
                }, '删除')
              ]);
            }
          }
        ],
        // 模块删除模态框
        removeRoleModal: {
          show: false,
          role: {},
          loading: false
        }
      }
    },
    methods: {
      removeRole(role) {
        let removeRoleModal = this.removeRoleModal;
        removeRoleModal.show = true;
        removeRoleModal.role = role;
      },
      handleUpdateRole(role) {
        this.$emit('on-update-role', role)
      },
      handleRemoveRole(role) {
        let removeRoleModal = this.removeRoleModal;
        removeRoleModal.loading = true;
        this.$emit('on-remove-role', role, (status) => {
          if (status) {
            removeRoleModal.show = false
            removeRoleModal.role = {}
          }
          removeRoleModal.loading = false
        })
      }
    }
  }
</script>
